<template>
	<view class="main">
		<!-- ======================================【顶部栏】====================================== -->
		<MyHead :title="title"></MyHead>
		<!-- ===================================================================================== -->
		
		<view class="HeadBackground">
			<image src="https://gd-hbimg.huaban.com/e7a82d471bdfc95b4df3ecfb85fb001336bd7bfb49f4a-omCHWg_fw480webp" mode=""></image>
		</view>

		<view class="ThreeModules">
			<view class="module" 
				v-for="(item, index) in modeluList" 
				:key="item.name" 
				:style="{backgroundColor: item.backgroundColor}"
				@click="toExercise(item)"
			>
				<view class="textBox">
					<view class="title">{{item.name}}</view>

					<view class="progress-container">
						<view class="progress" :style="{backgroundColor: item.progressColor}">待完成</view>
						<view class="progress-text">已完成{{item.completed}}/{{item.total}}个考点</view>
					</view>
				</view>
				
				<view class="button" :style="{backgroundColor: item.buttonColor}">
					<image src="https://gd-hbimg.huaban.com/c69a27bbcf673e5e28520f096970cd2b7f836e25ad2a-DL9QZ4_fw480webp" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="moreExercise">更多题库</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			modeluList: [
				{
					id: 1,
					name: '数据结构',
					completed: 1,
					total: 9,
					progressColor: 'rgb(200 245 236)',
					backgroundColor: 'rgb(40 172 189)',
					buttonColor: 'rgb(171 211 216)'
				},
				{
					id: 2,
					name: '计算机网络',
					completed: 2,
					total: 9,
					progressColor: 'rgba(192, 246, 248, 1)',
					backgroundColor: 'rgba(89, 214, 189, 1)',
					buttonColor: 'rgb(203 251 221)'
				},
				{
					id: 3,
					name: '操作系统',
					completed: 3,
					total: 9,
					progressColor: 'rgba(234, 248, 255, 1)',
					backgroundColor: 'rgba(155, 206, 240, 1)',
					buttonColor: 'rgb(219 251 255)'
				},
				// {
				//  id: 4, 	
				//  name: '计算机组成原理',
				// 	completed: 4,
				// 	total: 9
				// }
			],
			title: "题库:高分题库"
		};
	},
	computed: {
		progressWidth() {
			return ((this.completed / this.total) * 100).toFixed(2) + '%';
		},
	},
	methods: {
		toExercise(item) {
			uni.navigateTo({
				url: `../../ExercisePages/ExerciseMenu/ExerciseMenu?${item.id}`
			})
		}
	}
};
</script>


<style>
	page {
		background-image: url('https://gd-hbimg.huaban.com/68bb9dee1eed7f34673120d61b18a29d88adcb83713c9-hDYMPo_fw480webp'); 
		background-size: 100% 100%;
	}
</style> 

<style lang="less" scoped>
.main {
	position: relative; /* 添加相对定位 */
	width: 100%;
	height: 100%;

	.HeadBackground {
		width: 100%;
		height: 360rpx;
		position: absolute;
		top: 175rpx;
		left: 0rpx;
		z-index: 1; /* 降低 z-index 值 */

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ThreeModules {
		margin-top: 328rpx;
		
		.module{
			position: relative;
			z-index: 999;
			margin: auto;
			width: 87%;
			height: 242rpx;
			background-color: #825151;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 90rpx;
			
			.textBox {
				width: 70%;
				height: 100%;
				padding-left: 50rpx;

				.title {
					font-size: 50rpx;
					font-weight: 500;
					margin-top: 38rpx;
					color: #fff;
				}

				.progress-container {
					width: 100%;
					height: 50%;
					margin-top: 40rpx;
					display: flex;

					.progress {
						width: 30%;
						font-size: 15px;
						height: 56rpx;
						background-color: #E5E5E5;
						border-radius: 40rpx;
						text-align: center;
						line-height: 56rpx;
						position: relative;
					}

					.progress-text {
						font-size: 25rpx;
						margin-left: 25rpx;
						margin-top: 21rpx;
						color: #fff;
					}
				}
			}


			.button {
				width: 17%;
				height: 43%;
				border-radius: 50%;
				background-color: #fff;
				margin-left: 41rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.moreExercise {
		color: #fff;
		text-align: center;
		font-size: 19px;
		margin-top: -30rpx;
	}
}
</style>